import * as echarts from "echarts";
import { useEffect, useRef } from "react";
const BarChart = ({
  title,
  xData,
  sData,
  style = { width: "400px", height: "300px" },
}) => {
  const chartRef = useRef(null);
  let initChart;
  const drawChart = () => {
    if (initChart != null && initChart != "" && initChart != undefined) {
      initChart.dispose(); //销毁
    }
    initChart = echarts.init(chartRef.current);
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: xData,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: sData,
          type: "bar",
        },
      ],
    };
    initChart.setOption(option);
    window.addEventListener("resize", () => {
      initChart.resize();
    });
  };
  useEffect(() => drawChart(), [xData, sData]);
  return (
    <>
      <div ref={chartRef} style={style}></div>
    </>
  );
};
export default BarChart;
